<template>
  <div>
    <el-steps
      :active="stepsStatus"
      :space="200"
      align-center
      style="margin-left: 130px; margin-top: 20px;"
    >
      <el-step title="提交订单" :description="OrderInfo.createTime"></el-step>
      <el-step title="支付订单" :description="OrderInfo.payTime"></el-step>
      <el-step title="平台发货" :description="OrderInfo.consignTime"></el-step>
      <el-step title="确认收货" :description="OrderInfo.endTime"></el-step>
      <el-step title="完成评价" :description="OrderInfo.endTime"></el-step>
    </el-steps>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: red;" v-if="orderStatus === 0">
          <i class="el-icon-warning"></i>当前订单状态: 待付款
        </span>
        <span style="color: red;" v-if="orderStatus === 1">
          <i class="el-icon-warning"></i>当前订单状态: 待发货
        </span>
        <span style="color: red;" v-if="orderStatus === 2">
          <i class="el-icon-warning"></i>当前订单状态: 已发货
        </span>
        <span style="color: red;" v-if="orderStatus === 3">
          <i class="el-icon-warning"></i>当前订单状态: 已完成
        </span>
        <span style="color: red;" v-if="orderStatus === 4">
          <i class="el-icon-warning"></i>当前订单状态: 已关闭
        </span>
        <div style="float: right;">
          <el-button
            size="mini"
            v-if="orderStatus === 0 || orderStatus === 1"
            @click="xiugaishouhuoren()"
          >修改收货人信息</el-button>
          <el-button size="mini" v-if="orderStatus === 0" @click="updateGoods()">修改商品信息</el-button>
          <el-button size="mini" v-if="orderStatus === 0" @click="closeOrder()">关闭订单</el-button>
          <el-button size="mini" v-if="orderStatus === 1" @click="quxiaodd()">取消订单</el-button>
          <el-button size="mini" v-if="orderStatus === 4" @click="deleteOrder()">删除订单</el-button>
        </div>
      </div>
      <div>
        <div>
          <i class="el-icon-collection-tag"></i>
          <span>&nbsp;基本信息</span>
        </div>
        <el-table :data="tableData" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
          <el-table-column label="发货单流水号" width="180">
            <template>
              <span>暂无</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户账号"></el-table-column>
          <el-table-column label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == 3">银联支付</span>
              <span v-if="scope.row.payType == 2">支付宝</span>
              <span v-if="scope.row.payType == 1">微信支付</span>
              <span v-if="scope.row.payType == 0">货到付款</span>
            </template>
          </el-table-column>
          <el-table-column label="订单来源">
            <template slot-scope="scope">
              <span v-if="scope.row.sourceType == 1">web订单</span>
              <span v-if="scope.row.sourceType == 2">app订单</span>
              <span v-if="scope.row.sourceType == 3">微信公众号订单</span>
              <span v-if="scope.row.sourceType == 4">微信小程序订单</span>
              <span v-if="scope.row.sourceType == 5">H5手机页面订单</span>
            </template>
          </el-table-column>
          <el-table-column label="订单类型">
            <template>
              <span>正常订单</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="shippingName" label="配送方式" width="180"></el-table-column>
          <el-table-column prop="shippingCode" label="物流单号" width="180"></el-table-column>
          <el-table-column label="自动确认收货时间">
            <template>
              <span>{{ takeTimeout }} 天</span>
            </template>
          </el-table-column>
          <el-table-column></el-table-column>
          <el-table-column></el-table-column>
          <el-table-column></el-table-column>
        </el-table>
        <div style="margin-top: 20px;">
          <i class="el-icon-collection-tag"></i>
          <span>&nbsp;收货人信息</span>
        </div>
        <el-table :data="tableData" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="receiverContact" label="收货人"></el-table-column>
          <el-table-column prop="receiverMobile" label="手机号码"></el-table-column>
          <el-table-column prop="shippingCode" label="邮政编码"></el-table-column>
          <el-table-column prop="receiverAddress" label="收货地址" width="380"></el-table-column>
        </el-table>
        <div style="margin-top: 20px;">
          <i class="el-icon-collection-tag"></i>
          <span>&nbsp;商品信息</span>
        </div>
        <el-table :data="goodsListData" border style="width: 100%; margin-top: 10px;">
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="280">
            <template slot-scope="scope">
              <span v-for="(a, b) in scope.row.name.split(' ')" :key="a">
                <p v-if="b == 0">{{ a }}</p>
              </span>
              <br />品牌:
              <span>{{ scope.row.brand_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              价格:￥
              <span>{{ (scope.row.price/100).toFixed(2) }}</span>
              <br />货号:NO.00000
              <span>{{ scope.row.sn }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="spec" label="属性"></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column prop="money" label="小计">
            <template slot-scope="scope">
              ￥
              <span>{{ (scope.row.money/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right;margin-right: 20px;margin-top: 20px;">
          <span>
            合计:
            <b style="color: red;">￥{{ (OrderInfo.totalMoney/100).toFixed(2) }}</b>
          </span>
        </div>
        <div style="margin-top: 50px;">
          <i class="el-icon-collection-tag"></i>
          <span>&nbsp;费用信息</span>
        </div>
        <el-table :data="tableData" border style="width: 100%; margin-top: 10px;">
          <el-table-column label="商品合计">
            <template>
              <span>￥{{ (OrderInfo.totalMoney/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="运费">
            <template>
              <span>￥{{ (OrderInfo.postFee/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="receiverAddress" label="活动优惠">
            <template>
              <span>￥{{ (OrderInfo.preMoney/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单总金额">
            <template>
              <span>￥{{ ((OrderInfo.totalMoney + OrderInfo.postFee)/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应付总金额">
            <template>
              <span>￥{{ (OrderInfo.payMoney/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px;">
          <i class="el-icon-collection-tag"></i>
          <span>&nbsp;操作信息</span>
        </div>
        <el-table :data="OrderLog" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="operater" label="操作者"></el-table-column>
          <el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
          <el-table-column label="订单状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus == 1">待发货</span>
              <span v-if="scope.row.orderStatus == 2">已发货</span>
              <span v-if="scope.row.orderStatus == 3">已完成</span>
              <span v-if="scope.row.orderStatus == 4">已关闭</span>
              <span v-if="scope.row.orderStatus == 0">待付款</span>
            </template>
          </el-table-column>
          <el-table-column prop="payStatus" label="付款状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus == 0">未支付</span>
              <span v-if="scope.row.orderStatus == 1">已支付</span>
              <span v-if="scope.row.orderStatus == 2">已退款</span>
            </template>
          </el-table-column>
          <el-table-column prop="consignStatus" label="发货状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus == 0">未发货</span>
              <span v-if="scope.row.orderStatus == 1">已发货</span>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="350"></el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      title="修改收货人信息"
      width="600px"
      :visible.sync="shrdialogFormVisible"
      @close="dialogClose"
    >
      <el-form :model="OrderInfo2">
        <el-form-item label="收货人姓名:" :label-width="formLabelWidth">
          <el-input v-model="OrderInfo2.receiverContact" auto-complete="off" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" :label-width="formLabelWidth">
          <el-input v-model="OrderInfo2.receiverMobile" auto-complete="off" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="所在区域:" :label-width="formLabelWidth">
          <el-select v-model="shenValue" placeholder="省" @change="updateshen" style="width: 160px;">
            <el-option
              v-for="item in shen"
              :key="item.provinceid"
              :label="item.province"
              :value="item.province"
            ></el-option>
          </el-select>
          <el-select v-model="shiValue" placeholder="市" @change="updateshi">
            <el-option v-for="item in shi" :key="item.cityid" :label="item.city" :value="item.city"></el-option>
          </el-select>
          <el-select v-model="quValue" placeholder="区" @change="updatequ" style="width: 160px;">
            <el-option v-for="item in qu" :key="item.areaid" :label="item.area" :value="item.area"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入详细地址"
            v-model="OrderInfo2.receiverAddress"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shrdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugaishrqd()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="关闭订单" :visible.sync="gbdialogFormVisible">
      <el-input type="textarea" :rows="2" placeholder="请输入操作备注" v-model="guanbiInfo.beizhu"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gbdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="qdCloseOrder()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  inject: ['reload'],
  data () {
    return {
      OrderInfo: {},
      OrderInfo2: {
      },
      orderId: "",
      stepsStatus: 2,
      tableData: [],
      takeTimeout: "",
      goodsListData: [],
      OrderLog: [],
      orderStatus: 0,
      shrdialogFormVisible: false,
      formLabelWidth: '100px',
      shen: [],
      shenValue: '',
      shi: [],
      shiValue: '',
      qu: [],
      quValue: '',
      dizhi: [],
      gbdialogFormVisible: false,
      guanbiInfo: {
        beizhu: "",
        id: ""
      }
    };
  },
  created () {
    // 取到路由带过来的参数
    this.orderId = this.$route.query.id;
    this.getOrderInfo();
  },
  methods: {
    async getOrderInfo () {
      // 获取订单设置列表
      const { data: ress } = await this.$http.get(`vi/order/order/config/list`);
      this.takeTimeout = ress.data.tbOrderConfig.takeTimeout;
      // 根据id获取订单信息
      const { data: res } = await this.$http.get(
        `vi/order/order/detail/${this.orderId}`
      );
      this.stepsStatus = Number(res.data.tbOrder.orderStatus) + 1;
      this.orderStatus = Number(res.data.tbOrder.orderStatus);
      this.tableData.push(res.data.tbOrder);
      this.OrderInfo = res.data.tbOrder;

      // 获取订单中的商品信息
      const { data: resp } = await this.$http.get(
        `vi/order/order/item/queryByOrderIdGoods/${this.orderId}`
      );
      this.goodsListData = resp.data.TbOrderItems;

      // 获取订单日志信息
      const { data: relog } = await this.$http.get(
        `vi/order/order/log/orderByLog/${this.orderId}`
      );
      this.OrderLog = relog.data.orderLogs;
    },
    // 修改收货人
    async xiugaishouhuoren () {
      // 根据id获取订单信息
      const { data: ress } = await this.$http.get(
        `vi/order/order/detail/${this.orderId}`
      );
      this.OrderInfo2 = ress.data.tbOrder;

      this.dizhi = this.OrderInfo2.receiverAddress.split(' ')
      this.shenValue = this.dizhi[0]
      this.shiValue = this.dizhi[1]
      this.quValue = this.dizhi[2]
      this.OrderInfo2.receiverAddress = this.dizhi[this.dizhi.length - 1]
      // 打开窗口 
      this.shrdialogFormVisible = true
      // 获取省份信息
      const { data: res } = await this.$http.get(
        `vi/order/order/queryChenShi`
      );

      // 省
      this.shen = JSON.parse(res.data.provinces)

    },
    // 修改输收货人信息关闭
    dialogClose () {

      this.dizhi = []
      this.shi = []
      this.shiValue = ''
      this.qu = []
      this.quValue = ''
      this.shenValue = ''
      this.OrderInfo2 = ''
    },
    // 修改收货人信息确定
    async xiugaishrqd () {
      if (this.dizhi.length != 3) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择地址"
        });
        return
      }
      if (this.OrderInfo2.receiverContact === '' && this.OrderInfo2.receiverMobile === '' && this.OrderInfo2.receiverAddress === '') {
        // 提示信息
        this.$message({
          type: "info",
          message: "请填写完整信息"
        });
        return
      }
      this.shrdialogFormVisible = false;
      var dizii = ""
      this.dizhi.forEach(item => {
        dizii = dizii + item + " "
      })
      this.OrderInfo2.receiverAddress = dizii + this.OrderInfo2.receiverAddress
      const { data: res } = await this.$http.put(
        `vi/order/order/update`, this.OrderInfo2
      );
      // 提示信息
      this.$message({
        type: "success",
        message: res.message
      });

      // 刷新页面 -------不是强制刷新
      this.reload();


    },
    // 省改变
    async updateshen (val) {
      this.shi = []
      this.shiValue = ''
      this.qu = []
      this.quValue = ''
      let obj = {};
      obj = this.shen.find((item) => {
        return item.province === val;
      });

      this.dizhi = []
      this.dizhi.push(val)
      // 获取市信息
      const { data: res } = await this.$http.get(
        `vi/order/order/queryShiById/${obj.provinceid}`
      );
      // 市
      this.shi = JSON.parse(res.data.cities)
    },
    // 市改变
    async updateshi (val) {
      this.qu = []
      this.quValue = ''
      let obj = {};
      obj = this.shi.find((item) => {
        return item.city === val;
      });
      if (this.dizhi.length >= 2) {
        this.dizhi.splice(this.dizhi.length - 1, this.dizhi.length)

      }

      this.dizhi.push(val)
      // 获取区信息
      const { data: res } = await this.$http.get(
        `vi/order/order/queryByQuId/${obj.cityid}`
      );
      // 区
      this.qu = JSON.parse(res.data.areas)
    },
    // 改变区
    updatequ (val) {
      if (this.dizhi.length === 3) {
        this.dizhi.splice(this.dizhi.length - 1, this.dizhi.length)
      }
      this.dizhi.push(val)
    },
    // 删除订单
    deleteOrder () {
      this.$confirm("此操作将任务状态改为删除状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 点击确定的操作(调用接口)
          const { data: res } = await this.$http.delete(
            `vi/order/order/delete/${this.orderId}`
          );
          // 提示信息
          this.$message({
            type: "success",
            message: res.message
          });
          this.$router.go(-1);
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 修改商品信息
    updateGoods () {
      this.$router.push({
        query: {
          id: this.orderId
        },
        path: "/home/order/orderDetails/updateGoods"
      });
    },
    // 关闭订单
    closeOrder () {
      this.gbdialogFormVisible = true;
      this.guanbiInfo.id = this.orderId;
    },
    // 确定关闭订单
    async qdCloseOrder () {
      if (this.guanbiInfo.beizhu === "") {
        // 提示信息
        this.$message({
          type: "info",
          message: "操作备注不能为空"
        });
        return;
      }
      const { data: res } = await this.$http.post(
        `vi/order/order/closeOrder`,
        this.guanbiInfo
      );
      // 提示信息
      this.$message({
        type: "success",
        message: res.message
      });
      this.gbdialogFormVisible = false;
      this.reload();

    },
    // 取消订单
    quxiaodd () {
      this.$router.push({
        query: {
          id: this.orderId
        },
        path: "/home/cancelOrder"
      });
    }
  }
};
</script>
<style scoped>
.box-card {
  width: 80%;
  margin-left: 120px;
  margin-top: 10px;
}
</style>
